var data = [
    { value: '周杰伦听妈妈的话，好好听！', time: 5, color: 'red', speed: 1, fontSize: 22 },
    { value: '快快长大吧，才能保护她', time: 10, color: '#00a1f5', speed: 1, fontSize: 30 },
    { value: '听妈妈的话，晚点再恋爱吧', time: 6 },
    { value: '快快长大吧', time: 20, color: '#fff', speed: 0.5, fontSize: 20 },
    { value: '我很喜欢周董', time: 15, color: 'blue', speed: 2, fontSize: 26 },
  ]
  
  var canvas = document.getElementById('canvas')
  var video = document.getElementById('video')
  
  
  // 创建CanvasBarrage 类  舞台的搭建
  class CanvasBarrage {
    constructor (canvas, video, opts = {}) { // 定义一个构造函数
      if (!canvas || !video) return 
  
      // 将传进来的参数挂在当前函数上
      this.video = video
      this.canvas = canvas
      // 设置canvas画布的宽高和video保持一致
      this.canvas.width = video.width
      this.canvas.height = video.height
  
      // 创建一个画布
      this.ctx = canvas.getContext('2d')
  
      // 设置默认的弹幕样式，如果没传，就启用默认
      let defOpt = {
        color: '#e91e63',
        speed: 1,
        opacity: 0.5,
        fontSize: 20,
        data: []
      }
      Object.assign(this, defOpt, opts)
  
      // 判断视屏是播放还是暂停状态, 默认true为暂停
      this.isPaused = true
      // 得到所有的弹幕消息
      this.barrages = this.data.map((item) => {
        return new Barrage(item, this)
      })
    }
  }
  
  
  
  // 创建一个Barrage类，用来实例化每一条弹幕
  class Barrage {
    
  }
  
  
  let canvasBarrage = new CanvasBarrage(canvas, video, { data })
  